<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>微淘划购-用户中心</title>
	<link rel="stylesheet" type="text/css" href="css/reset.css">
	<link rel="stylesheet" type="text/css" href="css/main.css">
	<link rel="stylesheet" type="text/css" href="js/bootstrap-3.4.1-dist/css/bootstrap.min.css"/>
	    <style>
      /* 将按钮固定在页面的顶部 */
      .fixed-button {
        position: fixed;
        top: 196px;
        left: 1525px;
        z-index: 9999; /* 将按钮放在其他元素上方 */
		height: 30px;
      }
	  .tis{
		  left: 1500px;
		  height: 110px;
		  top: 100px;
		  display: none;
	  }
      .scroll-text-box {
        width: 400px;
        overflow: auto;
        border: none;
        resize: none;
      }
    </style>
</head>
<body>
<a href="#maodian"><img src="images/箭头.png" id='jt' class="fixed-button" /></a>
<a href="#maodian"><img src="images/提示框.png" class="fixed-button tis" /></a>
<!--订单状态响应框-->
<div class="modal fade in"  id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="display:none ; padding-right: 15px;">
	<div class="modal-dialog " role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close myClose" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
				<h5 class="modal-title" id="myModalLabel" style="font-weight: bolder">无</h5>
			</div>
			<div id="statusText" class="modal-body dataText" style="font-size: 20px;">
				商品正在快马加鞭
			</div>
			<div class="modal-footer buttonClass">
				<button id="close" type="button" class="btn btn-default myClose" data-dismiss="modal">关闭</button>
				<button id="Out" type="button" class="btn btn-primary" data-dismiss="modal" style="display: none;">确定</button>
			</div>
		</div>
	</div>
</div>
<!--删除,取消响应模态框-->
<div class="modal fade in" id="del" tabindex="-1" role="dialog" aria-labelledby="myModalLabel " data-target=".bs-example-modal-sm" style="display: none; padding-right: 15px;">
        <div class="modal-dialog" role="document">
            <div class="alert alert-danger" role="alert">
                <div class="panel-heading">
                    <h3 id="del_text" class="panel-title" style="font-size: 25px">删除用户</h3>
                </div>
                <div class="panel-body">
                    <div class="modal-footer">
                        <button type="button" id="delClo" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" id="delOrderButton" class="btn btn-danger Del">删除</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

<div class="header_con" >
		<a name="maodian"></a>
		<div class="header">
			<div class="welcome fl">欢迎来到微淘划购!</div>
			<div class="fr">
				<div class="login_info fl">
					欢迎您：<em style="color: red">张 山</em>
				</div>
				<div class="user_link fl">
					<span>|</span>
					<a href="user_center_info.html">用户中心</a>
					<span>|</span>
					<a href="cart.html">我的购物车</a>
					<span>|</span>
					<a href="user_center_order.html">我的订单</a>
				</div>
			</div>
		</div>
	</div>

	<div class="search_bar clearfix">
		<a href="index.html" class="logo fl"><img src="images/logo.png"></a>
		<div class="sub_page_name fl">|&nbsp;&nbsp;&nbsp;&nbsp;用户中心</div>
        <form method="get" action="/search.html" class="search_con fr mt40">
            <input type="text" class="input_text fl" name="q" placeholder="搜索商品">
            <input type="submit" class="input_btn fr" name="" value="搜索">
        </form>
	</div>

	<div class="main_con clearfix" id="order">
		<div class="left_menu_con clearfix">
			<h3>用户中心</h3>
			<ul>
				<li><a href="user_center_info.html">· 个人信息</a></li>
				<li><a href="user_center_order.html" class="active">· 全部订单</a></li>
				<li><a href="user_center_site.html">· 收货地址</a></li>
				<li><a href="user_center_pass.html">· 修改密码</a></li>
			</ul>
		</div>
		<div class="right_content clearfix">
			<h3 class="common_title2">全部订单
				<span style="float: right">
					<button  type="button" @click="myComment()" class="btn  btn-primary btn-success" data-toggle="modal">我的评价</button>
				</span>
			</h3>
			<div v-for="order in order_list">
				<ul class="order_list_th w978 clearfix">
					<li class="col01" style="width: 30%">下单时间：[[order.create_time]]</li>
					<li class="col02" style="width: 60%">订单号：[[order.order_id]]</li>
                    <li @click="noOrder(order.order_id)" v-if="order.status=='待支付'"> 取消订单</li>
				</ul>

				<table class="order_list_table w980">
					<tbody>
						<tr>
							<td width="55%">
								<ul class="order_goods_list clearfix" v-for="sku in order.skus">
									<li class="col01"><a :href="'/goods/'+sku.sku_id+'.html'"><img :src="sku.sku_img"></a></li>
									<li class="col02" >[[sku.name]]</li>
									<li class="col03">[[sku.count]]</li>
									<li class="col04">[[sku.price]]元</li>
								</ul>
							</td>
							<td width="15%">[[order.total_amount]]元</td>
							<td width="15%">[[order.pay_method]]</td>
							<td width="15%">
								<button  value="order.order_id"  @click='order_sys($event,order.order_id)' class="oper_btn">[[order.status]]</button>
                                <button @click="delOrder(order.order_id)">删除</button>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
			<!--待评价模态框-->
		<div class="modal fade in " id="comment" tabindex="-1" role="dialog" aria-labelledby="myModalLabel " data-target=".bs-example-modal-sm" style="display: none; padding-right: 15px;">
	<div class="modal-dialog" role="document">
		<div class="alert alert-warning" role="alert">
			<div class="panel-heading">
				<h4 class="panel-title" style="font-size: 25px">商品评论</h4>
			</div>
			<div class="panel-body">
				<form novalidate="" id="formModify">

					<label style="margin-top: 10px">选择订单商品:</label>
					<select name="staffFaculty" class="form-control" placeholder="商品" required="" id="is_goods">
					  <option value="" selected="">---------</option>

						<option v-for="goods in goods_list" :value="goods.sku_id">[[goods.name]]&emsp;（[[goods.comment_status]]）</option>

					</select>
					<label style="margin-top: 10px">请写评论：</label>
					<p><textarea rows="5" cols="50" id="pl"></textarea></p>
                            <div style="color: red" class="error_red"></div>

                    </form>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" id="cl" @click="on_ol()" data-dismiss="modal">关闭</button>
                        <button type="button" @click="on_save()" class="btn btn-warning Modify ">保存</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
        	<!--我的评价-->
	    <div class="modal fade"  style="background-color: white;opacity: 0.9" id="myComment" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
	  <div class="modal-dialog modal-xl" role="document" style="width:1140px;color: black;font-size: 15px;">
		<div class="bs-example" data-example-id="simple-table">
        <table class="table">
          <caption style="font-size: 20px">我的评价</caption>
          <thead>
            <tr>
              <th>订单号</th>
              <th>商品</th>
              <th>评价</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item in userComment">
                <!--sku_id,sku_img,comment_id,comment,time,sku_name-->
                <td style="font-size: 15px;font-weight: bold">[[item.order_id]]</td>
              <td style="width: 300px"><a :href="'/goods/'+item.sku_id+'.html'"><img width="50px" :src="item.sku_img"></a>&emsp;<span>[[item.sku_name]]</span></td>
               <td style="position: relative;">
                    <div class="scroll-text-box">
                      <textarea :id="'textarea'+item.id" rows="3" cols="40">[[item.comment]]</textarea>
                        <hr>
                      <span style="position: absolute; right: 0; bottom: 0;">[[item.time]]</span>
                    </div>
               </td>
              <td>
                  <button @click="userCommentUpdate(item.id)" class="oper_btn">修改</button>
                  <button  @click="userCommentDel(item.id)" class="oper_btn">删除</button>
              </td>
            </tr>
          </tbody>
        </table>
    </div>
	  </div>
	</div>

	</div>



	<div class="footer">
		<div class="foot_link">
			<a href="#">关于我们</a>
			<span>|</span>
			<a href="#">联系我们</a>
			<span>|</span>
			<a href="#">招聘人才</a>
			<span>|</span>
			<a href="#">友情链接</a>
		</div>
		<p>CopyRight © 2016 北京阿威商业股份有限公司 All Rights Reserved</p>
		<p>电话：010-****888    京ICP备*******8号</p>
	</div>
	<script type="text/javascript" src="js/vue-2.5.16.js"></script>
	<script type="text/javascript" src="js/host.js"></script>
	<script type="text/javascript" src="js/axios-0.18.0.min.js"></script>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript" src="js/bootstrap-3.4.1-dist/js/bootstrap.js"></script>
	<script type="text/javascript" src="js/jquery.cookie.js"></script>
	<script type="text/javascript">
		 var app=new Vue({
			 el: '#order',
			 delimiters: ['[[', ']]'], // 修改vue模板符号，防止与django冲突
			 data:{
			 	 host,
				 order_list:[],
				 goods_list:[],
				 order_id:0,
				 goods_list_num:[],
				 temporary:null,
                 userComment:[]
			 },
			 mounted() {
				 this.get_order();
				 this.topping();
				 this.getUserComment();
			 },
			 methods: {
				 get_order:function (){ //获得用户订单数据
					 let url = this.host + '/order_list/';

					 axios.get(url,{
								 responseType: 'json',
								 withCredentials: true,
							 })
							 .then(response => {
								if (response.data.code==400){
									alert(response.data.errmsg)
									return
								}

								this.order_list=response.data.order_list
								 })
							 .catch(error => {

					 			})
				 },
				 topping:function () { //箭头提示显示
					 $('#jt').mouseover(function () {
						$('.tis').show()
					 }).mouseout(function () {
						 $('.tis').hide()
					 })
				 },
				 get_comments_num(order_id){//查看评论数
					 let url = this.host + '/comments_num?orderId='+order_id;
					 axios.get(url, {
								 responseType: 'json',
								 withCredentials: true,
							 })
							 .then(response => {
								 if(response.data.code==201){
									 this.goods_list.filter(goods => {
									 	if (response.data.skuIdList[goods.sku_id]){
									 		goods.comment_status=response.data.skuIdList[goods.sku_id]
										}else {
									 		goods.comment_status='未评价'
										}
										})
								 }else if(response.data.code==202){
								 	this.goods_list.filter(goods => {
										goods.comment_status='未评价'

										})
								 }

								 this.$forceUpdate()

								 })
							 .catch(error => {
					 			})

				 },
				 order_sys:function (event,order_id) {//订单状态处理
				 	let url = this.host + '/orderSys/';
					if(event.currentTarget.innerHTML=="待支付"){
						axios.get(url, {
							params: {
								status:1,
								order_id:order_id,
							},
								 responseType: 'json',
								 withCredentials: true,
							 })
							 .then(response => {
								if (response.data.code==400){
									alert(response.data.errmsg)
									return
								}else {
									location.href = response.data.alipay_url;
								}
								 })
							 .catch(error => {
									console.log(error);
					 			})

					}
					else if (event.currentTarget.innerHTML=="待发货"){
						$('#myModalLabel').text('订单：'+order_id)
						$('#statusText').text('商家正在快马加鞭的出库')
						$('#myModal ').modal('show')
						setTimeout(
							function () {
								$('#myModal').modal('hide')
							},
							1500
						)

					}
					else if(event.currentTarget.innerHTML=="待收货"){
						$('#myModalLabel').text('订单：'+order_id)
						$('#statusText').text('快递小哥正在朝您飞奔而来')
						$('#myModal ').modal('show')
						setTimeout(
							function () {
								$('#myModal').modal('hide')
							},
							1500
						)
					}
					else if(event.currentTarget.innerHTML=="待评价"){
						for(i=0;i<this.order_list.length;i++){
							if (order_id==this.order_list[i]['order_id']){
								this.goods_list=this.order_list[i]['skus']
								this.get_comments_num(order_id)
								$('#comment').modal('show')
								this.order_id=order_id

							}
						}
					}
				},
				 on_ol:function () {//评论框关闭
					 $('#comment').modal('hide')
					 $('#pl').val('')
					 $('#pl').text('')
					 $('#is_goods').val("")
				 },
                 noOrder:function(order_id){
				     //取消订单
                     $('#del_text').text('您确定要取消订单:'+order_id+'?')
                     $('#delClo').text('不，我不取消')
                     $('#delOrderButton').text('没错，我要取消')
                     $('#del').modal('show')
                     $('#delOrderButton').click(function () {//发送请求
                         let url = app.$data.host + '/orders/noOrders?orderId=' + order_id + '&key=' + $.cookie('key');
                         axios.get(url, {
                             responseType: 'json',
                             withCredentials: true,
                         })
                             .then(response => {
                                 if (response.data.code == 204) {
                                     alert('订单取消失败！')
                                     return
                                 } else if (response.data.code == 202) {
                                     alert('订单取消成功！')
                                 }
                                 $('#del').modal('hide')
                                 location.reload()
                             })
                             .catch(error => {

                             })
                     })

                 },
				 on_save:function () {//评论保存，发送请求
				 	 var idex=document.getElementById("is_goods").selectedIndex
					 if(idex==0){
					 	 alert('请选择商品')
						 return
					 }
					 var a= '#is_goods>option:eq('+idex+')'
					 var sku_id=$(a).val() //sku_id
					 var text=$('#pl').val()
					 var key=$.cookie('key')
					 if(text.length <= 0) {
						 alert('评论不能为空！')
						 return
					 }
					 //发送请求保存评论
					 let url = this.host + '/comments/';
					 axios.post(url, {
							 	 skuId:sku_id,
								 orderId:this.order_id,
						 		 comment:text,
						         key:key
							 },{
								 responseType: 'json',
								 withCredentials: true,
							 })
							 .then(response => {
								if (response.data.status==202){
									alert('已经评论过三次，不能再评论了哦！')
								}else if(response.data.status==201){
									alert('评论成功！')
								}

								this.on_ol()
								 location.reload()
								 $('#is_goods').val("")
                                 location.reload()

								 })
							 .catch(error => {
								 $('#is_goods').val("")
					 			})


				 },
				 myComment:function () {
					 //我的评价按钮点击
					 $('#myComment').modal('show')
                     //发送请求
				 },
                 delOrder:function (order_id) {
                     //删除订单模态框学生
                     $('#del_text').text('您确定要删除订单：'+order_id)
                     $('#delClo').text('关闭')
                     $('#delOrderButton').text('删除')
                     $('#del').modal('show')
                     $('#delOrderButton').click(function () {//发送请求
                         let url = app.$data.host+'/orders/del?orderId='+order_id+'&key='+$.cookie('key');
                         axios.get(url, {
								 responseType: 'json',
								 withCredentials: true,
							 })
							 .then(response => {
								if (response.data.code==204){
									alert('订单删除失败！')
                                    return
								}else if(response.data.code==202){
								    alert('订单删除成功！')
                                }
								 $('#del').modal('hide')
                                  location.reload()
                             })
							 .catch(error => {

                             })

                     })
                 },
                 getUserComment:function () {
                     let url = this.host+'/userComments?key='+$.cookie('key');
                     axios.get(url, {
                             responseType: 'json',
                             withCredentials: true,
                         })
                         .then(response => {
                            if (response.data.code==204){
                                alert('数据有误')
                                return
                            }else if(response.data.code==200){
                                this.userComment=response.data.data
                                this.$forceUpdate()
                            }
                         })
                         .catch(error => {

                         })
                 },
                 userCommentUpdate:function (comment_id) {
                     let comment_text=$('#textarea'+comment_id).val()
                     let url = this.host+'/userCommentPut/'
                     axios.put(url, {
                            'key':$.cookie('key'),
                            'comment':comment_text,
                            'comment_id':comment_id
                         },{
                             responseType: 'json',
                             withCredentials: true,
                         })
                         .then(response => {
                            if (response.data.code==204){
                                alert('数据有误')
                                return
                            }else if(response.data.code==200){
                                this.userComment=response.data.data
                                alert('评论修改成功')
                                this.getUserComment()
                            }
                         })
                         .catch(error => {

                         })
                 },
                 userCommentDel:function (myid) {
                     let url = this.host+'/userCommentPut?id='+myid+'&key='+$.cookie('key')
                     axios.delete(url, {
                             responseType: 'json',
                             withCredentials: true,
                         })
                         .then(response => {
                            if (response.data.code==204){
                                alert('数据有误')
                                return
                            }else if(response.data.code==205){
                                this.userComment=response.data.data
                                alert('评论删除成功')
                                this.getUserComment()
                            }
                         })
                         .catch(error => {

                         })
                 }


			 },
		 })



	</script>
</body>
</html>
